{% extends "others/other_index.html" %}
{% load staticfiles %}
{% block content %}
    <style>
        #serch {
            margin-top: 10px;
            {#padding-left: 5%#}
            position: relative;
            {#top:10px;#}
        }

        .lab {
            border: 1px deepskyblue solid;
            border-radius: 5px;
            background-color: ghostwhite;
            height: 26px;
        }

        #ser {
            border: 1px deepskyblue solid;
            border-radius: 5px;
            width: 40%;
            background-color: ghostwhite;
            height: 26px;
        }

        .but {
            margin-left: 3%;
            width: 15%;
        }

        #ser:hover {
            border: 1px blue solid
        }

        #neirong {
            margin-top: 10px;
        }

        .table {
        }

        th, td {
            text-align: center;
        }
        th{text-align: center;background-color: deepskyblue;color: white}
        .table-bordered th,
        .table-bordered td {
            border: 1px solid grey !important;
        }
        #myModal2 input{background-color: ghostwhite;border: 1px solid lightskyblue;border-radius: 6px;}
        #myModal2 input:hover{border: 1px solid blue}
        #myModal2 select{background-color:ghostwhite;border: 1px solid lightskyblue;border-radius: 6px;text-align: center; }
        #myModal2 select:hover{border: 1px solid blue}
    .list{margin-top: 10px;margin-left:25%;font-size: 2rem;}

    </style>

    <section style="width: 94%;margin: auto;margin-bottom: 3%">
        <div id="serch" class="">
            <form action="/other/user/manage/" method="post" >
                <select name="search" class="lab">
                    {% if value == 2 %}
                        <option value="1">员工编号</option><option value="2" selected>姓名</option><option value="3">部门</option><option value="4">职位</option><option value="5">级别</option><option value="6">电话</option>
                    {% elif value == 3 %}
                        <option value="1">员工编号</option><option value="2">姓名</option><option value="3" selected>部门</option><option value="4">职位</option><option value="5">级别</option><option value="6">电话</option>
                    {% elif value == 4 %}
                        <option value="1">员工编号</option><option value="2">姓名</option><option value="3">部门</option><option value="4" selected>职位</option><option value="5">级别</option><option value="6">电话</option>
                    {% elif value == 5 %}
                        <option value="1">员工编号</option><option value="2">姓名</option><option value="3">部门</option><option value="4">职位</option><option value="5" selected>级别</option><option value="6">电话</option>
                    {% elif value == 6 %}
                        <option value="1">员工编号</option><option value="2">姓名</option><option value="3">部门</option><option value="4">职位</option><option value="5">级别</option><option value="6" selected>电话</option>

                    {% else %}
                    <option value="1">员工编号</option>
                    <option value="2">姓名</option>
                    <option value="3">部门</option>
                    <option value="4">职位</option>
                    <option value="5">级别</option>
                    <option value="6">电话</option>{% endif %}
                </select>
                <input type="text"  name="search_txt" id="ser" required placeholder="输入搜索内容（可模糊搜索哦）" value="{{ content }}">
                <button type="submit"  class="but lab">搜索</button>
                <p style="position: absolute;right: 0;top:0">
                    {{ p_num }}人
                <button type="button" class="lab" style="background-color: darkblue;border: none"><a href="" style="color: white">刷新</a></button>
                <button type="button" class="lab" style="background-color: darkblue;border: none"><a href="/other/index/" style="color: white">返回上一级</a></button></p>
                {% if error %}
                <span class="a" style="color: orangered">{{ error }}</span>
                 {% else %}
                    <span class="" style="margin-left: 1%">郑州创恒实业有限公司</span>
                {% endif %}
            </form>
        </div>
        <div id="neirong">
            <table class="table table-bordered table-striped table-hover ">

                <thead>
                <tr>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>部门</th>
                    <th>职位</th>
                    <th>级别</th>
                    <th>电话</th>
                    <th>登录次数</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for i in data %}
                    <tr>
                        <td>{{ i.id }}</td>
                        <td>{{ i.name }}</td>
                        <td>{{ i.sex }}</td>
                        <td>{{ i.depart }}</td>
                        <td>{{ i.position }}</td>
                        <td>{{ i.level }}</td>
                        <td>{{ i.phone }}</td>
                        <td>{{ i.login_num }}</td>
                        <td>{{ i.status }}</td>
                        {% if user_type >= 3 %}
                        <td>
{#                            <button name="{{ i.id }}" class="update lab">加好友</button>#}
                            <button name="{{ i.id }}" data-toggle="modal" data-target="#myModal2" class="update lab">修改</button>
                            <button name="{{ i.id }}" data-toggle="modal" data-target="#myModal" class="del lab">删除</button>
                            <button  data-toggle="modal" class="qiandao lab"><a href="/other/sign/?uid={{ i.id }}">签到详情</a></button>
                        </td>
                         {% else %}
                            <td>
                            <span name="{{ i.id }}" >———</span>
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>

        {#<button type="submit" class="btn btn-primary btn-lg">提交审核</button>#}

    </section>
{#  删除模态框  #}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    style="margin-top: 10%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: center">是否删除?</h4>
            </div>

            <div style="text-align: center;margin-top: 15px;margin-bottom: 15px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="del" class="btn btn-primary"><a style="color: white">确定</a></button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
    {#  修改模态框  #}
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    style="margin-top: 6%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: center">修改信息</h4>
            </div>
            <form action="/other/user/manage/update/" method="post" style="margin-top: 10px; ">
                <div class="a list">
              <label for="nam" >姓名：</label>
              <input type="text" name="name" required id="nam" value="123">
            </div>
            <input type="text" name="id" required id="id"  value="" style="display: none">
            <div class="a list">
              <label for="phone" >电话：</label>
              <input type="number" name="phone"  required id="phone" value="">
            </div>
            <div class="a list">
              <label for="depart" >部门：</label>
              <select name="depart" style="position: absolute;z-index: 3;"
        onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0">
						<option value="0" id="d"></option>
                        {% for i in all_d %}
                        <option value="{{ i.id }}">{{ i.name }}</option>
                        {% endfor %}
              </select>
            </div>
                <div class="a list">
              <label for="position" >职位：</label>
              <select name="position" style="position: absolute;z-index: 2;"
        onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0">
						<option value="0" id="p"></option>
                        {% for i in all_p %}
                        <option value="{{ i.id }}">{{ i.name }}</option>
                        {% endfor %}
              </select>
            </div>
                <div class="a list">
              <label for="level" >级别：</label>
              <select name="level" style="position: absolute;z-index: 1;"
        onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0">
                  <option id="level"></option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
              </select>
            </div>
            <div class="a list">
              <label for="adress" >地址：</label>
              <input type="text" name="adress"  id="adress" value="">

            </div>
            <div class="modal-footer" style="text-align: center;margin-top: 20px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary">确定</button>
            </div>
            </form>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script src="{% static 'js/jquery.js' %}"></script>
<script>

    $('.update').each(function () {
        $(this).click(function () {
            var uid = $(this).attr('name');
            settings = {
                url:"/user/info/other/",
                type:"POST",
                data:{"uid":uid},
                success:function(data){
                    $('#phone').val(data.data.phone);
                    $('#nam').val(data.data.name);
                    $('#p').html('当前职位：'+data.data.position1);
                    $('#d').html('当前部门：'+data.data.department);
                    $('#level').html('当前级别：'+data.data.level);
                    $('#adress').val(data.data.adress);
                    $('#id').val(uid);
                }
            };
            $.ajax(settings);
        })});
    $('.del').each(function () {
        $(this).click(function () {
            var uid = $(this).attr('name');
            settings = {
                url:"/other/user/manage/update/",
                type:"GET",
                data:{"uid":uid,"type":1},
                success:function(data){
                    window.location.reload();
                }
            };
            $('#del').click(function () {
                $.ajax(settings);
            });

        })})
</script>
{% endblock %}